<template>
  <div>
    <el-container>
      <el-header style="margin-bottom: 20px">
        <label style="color: darkturquoise;font-weight: bolder;font-size: xxx-large">公告</label>
      </el-header>
    </el-container>
    <el-card>
      <!-- 设置添加按钮 -->
      <!--      <el-button style="margin:10px 0px" type="success" size="mini" @click="addShow = true">添加新公告</el-button>-->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="公告名称" width="240">
        </el-table-column>
        <el-table-column label="图片" width="150" prop="createTime">
          <template slot-scope="scope">
            <img :src="scope.row.image" style="width: 100px; height: 80px" />
          </template>
        </el-table-column>
        <!--        <el-table-column label="备注" width="240" prop="remark"></el-table-column>-->
        <el-table-column label="内容" width="150">
          <template slot-scope="scope" >
            <el-popover trigger="hover" placement="top" width="300">
              <p style="width: 300px">备注: {{ scope.row.content }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">点击查看</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" width="240" prop="publishTime"></el-table-column>
        <el-table-column label="发布人" width="240" prop="publishUserName"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row>
        <el-col :span="12" :offset="12">
          <el-pagination layout="total,prev, pager, next,jumper,sizes " background small prev-text="上一页" next-text="下一页"
                         :total="total" :page-size="pageSize" :current-page="pageNow" :page-sizes="[5, 10, 50]"
                         style="margin:15px 0px"
                         @current-change="findPage" @size-change="findSize">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  mounted() {
    this.findPage(this.pageNow, this.pageSize)
  },
  data() {
    return {
      searchByName: '',
      pageNow: 1,
      pageSize: 5,
      total: 0,
      addShow: false,
      image: '',
      //添加公告型的表单
      form: {
        id: 0,
        title: '',
        content: '',
        image: '',
      },
      formLabelWidth: '120px',
      tableData: []
    }
  },
  methods: {

    findSize(size) {
      // console.log(size)
      this.pageSize = size
      this.findPage(this.pageNow, this.pageSize)
    },
    findPage(page) {
      // console.log(page)
      this.pageNow = page
      if (this.value != '') {
        // 页面变动之后需要查询相同种类的变动页码的数据
        this.$http.get("/notice/list/" + this.pageNow + "/" + this.pageSize+"?searchKey="+this.searchByName).then(res => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total
          // console.log(this.tableData)
        });
        return
      }
    }
  }

}
</script>

<style></style>
